<template>
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div class="header-bar" style="padding-top:10px">
       <span class="float-left" style="line-height: 31px">
        <h3>用户配置{{ currentRole ? ':' + currentRole.name + ' - ' + currentRole.sn : '' }}</h3>
      </span>

    </div>
    <div class="list">
      <Table :datas="table.data" :loading="table.loading" @select="selected" checkbox>
        <TableItem title="序号" prop="$serial" :width="50"></TableItem>
        <TableItem title="用户名" prop="username"></TableItem>
        <TableItem title="姓名" prop="name"></TableItem>
        <TableItem title="机构" prop="branchSn" :format="formatBranch"></TableItem>
        <TableItem title="手机号" prop="phone" :width="120"></TableItem>
        <TableItem title="性别" prop="gender" dict="Gender"  :width="50"></TableItem>
      </Table>
    </div>
    <div class="bar">
      <Pagination v-model="table.pagination" align="right" @change="table.load()"></Pagination>
    </div>
    <footer  style="text-align: right;padding-top: 8px" >

      <Button :disabled="currentRole==null" icon="h-icon-plus" color="primary" @click="addToRole">添加用户到角色</Button>
      <Poptip :disabled="selects.length==0" class="h-btn" content="确定从角色删除所选用户？" @confirm="delFromRole">
        <Button color="red" icon="h-icon-trash"  :disabled="selects.length==0">从角色删除</Button>
      </Poptip>
      <Button icon="h-icon-close" @click="doClose">关闭</Button>
    </footer>
    <Modal v-model="showChooseUser" :closeOnMask="false">
      <div style="height: 400px;width:700px;display: flex;flex-direction: column;">
        <div class="query-bar" style="border-top:none;border-bottom: 1px solid #b3b3b3;padding-top:10px">
          <Input type="text" v-model="chooseTable.params.username" placeholder="用户名"/>
          <Input type="text" v-model="chooseTable.params.name" placeholder="姓名"/>
<!--          <TreePicker :option="branchOption" v-model="chooseTable.params.branchSn" placeholder="所属机构" useConfirm-->
<!--                      filterable></TreePicker>-->
          <CategoryPicker
              v-model="chooseTable.params.branchSn"
              :option="branchOpts"
              style="width:250px;display:inline-block;"
          />
          <!-- 工具条 -->
          <Button icon="h-icon-search" @click="chooseTable.load()" circle>查询</Button>
        </div>
        <div class="list" style="height: 310px;padding-bottom: 10px">
          <Table :datas="chooseTable.data" :loading="chooseTable.loading" @select="selectedC" checkbox>
            <TableItem title="序号" prop="$serial" :width="50"></TableItem>
            <TableItem title="用户名" prop="username"></TableItem>
            <TableItem title="姓名" prop="name"></TableItem>
            <TableItem title="机构" prop="branchSn" :format="formatBranch"></TableItem>
            <TableItem title="手机号" prop="phone" :width="120"></TableItem>
            <TableItem title="性别" prop="gender" dict="Gender" :width="50"></TableItem>
          </Table>
        </div>
        <div class="bar">
          <Pagination v-model="chooseTable.pagination" align="right" @change="chooseTable.load()"></Pagination>
        </div>
      </div>
      <template #footer>
        <Button @click="showChooseUser=false">取消</Button>
        <Button :loading="submitting" color="primary" @click="submitAdd">确认</Button>
      </template>
    </Modal>
  </div>
</template>
<script>
import {ajax, util, DataSource,default as f} from 'framework'

let table = new DataSource('role/user_in_role', true)
let chooseTable = new DataSource('role/user_not_in_role', true)
export default {
  name: "RoleUser",
  emits:['close'],
  props: {
    role: Object
  },
  data() {
    return {
      table: table,
      chooseTable: chooseTable,
      currentRole: null,
      showChooseUser: false,
      selects: [],
      selects_c: [],
      branchOption: {
        keyName: 'sn',
        parentName: 'psn',
        titleName: 'name',
        dataMode: 'list',
        datas: []
      },
      branchOpts:{
        keyName: 'id',
        titleName: 'fullName',
        dataMode: 'tree',
        datas: []
      },
      submitting: false
    }
  },
  watch: {
    role(v) {
      this.loadUser(v)
    }
  }, mounted() {
    if (this.role) {
      this.loadUser(this.role)
    }
    this.branchOpts.datas=f.getBranches('tree')
    // ajax.get("branch/list").then(r => {
    //  // this.branchOption.datas = r.data;
    //   this.branchOpts.datas=util.asTree(r.data,"id","pid")
    // })
  }, methods: {
    doClose(){
      this.$emit('close')
    },
    loadUser(v) {
      this.selects = []
      this.currentRole = null
      table.params.role = v.sn
      table.load(dt => {
        this.currentRole = v
        return dt
      });
    },
    formatBranch:f.getBranches('mapper'),
    selectedC(v) {
      this.selects_c = v.map(it => util.fields(it, 'username'))
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'username'))
    },
    addToRole() {
      this.showChooseUser = true
      chooseTable.params.role = this.currentRole.sn
      chooseTable.load()
    },
    delFromRole() {
      ajax.formPost('role/remove_users', {role:this.currentRole.sn,users:this.selects.map(it=>it.username)}).then(r => {
        table.load()
      })
    },
    submitAdd() {
      if(this.selects_c.length==0){
        this.showChooseUser = false
        return
      }

      this.submitting = true
      ajax.formPost('role/add_users', {role: this.currentRole.sn, users: this.selects_c.map(it=>it.username)}).then(r => {
        table.load()
        this.showChooseUser = false
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>
